<template>
  <el-table :data="grids" style="width: 100%">
    <el-table-column prop="gid" label="网格编号" width="180" />
    <el-table-column prop="gname" label="名称" width="180" />
    <el-table-column prop="gdesc" label="描述" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
          size="small"
          type="primary"
          :icon="Edit"
          @click="handleEdit(scope.$index, scope.row)"
        >
          Edit
        </el-button>
        <el-button
          size="small"
          :icon="Delete"
          type="warning"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { useGridStore } from '@/stores/grid'
import { storeToRefs } from 'pinia'
import { Edit, Delete } from '@element-plus/icons-vue'
const gridStore = useGridStore()
const { grids } = storeToRefs(gridStore)

const handleEdit = (index) => {
  //console.log(index)
  gridStore.show4Mod(index)
}
const handleDelete = (index) => {
  console.log(index)
  gridStore.delGrid(index)
}

// 初始化
gridStore.findall()
</script>
